<template>
	<el-main style="padding: 0px; background-color: #ffffff; height: 100%">
		<div class="info-box">
			<div class="info-title"><span>创建账号</span></div>
		</div>
		<div class="info-content">
			<labelName :title="'当前组织:  ' + form.orgName"></labelName>
			<!-- {{ selection }} -->
			<el-form ref="dialogForm" :model="form" :rules="rules" :disabled="mode == 'show'" label-width="100px"
				label-position="left">
				<div class="info-box">
					<div class="right-panel-search" style="margin-bottom: 20px">
						<div class="panel-search-box">
							<span class="demonstration" style="margin-left: 10px">员工编号:</span>
							<el-input v-model="search.empNum" placeholder="请输入员工编号"
								style="margin-left: 10px; width: 180px" clearable></el-input>
						</div>
						<div class="panel-search-box">
							<span class="demonstration" style="margin-left: 10px">真实姓名:</span>
							<el-input v-model="search.name" placeholder="请输入真实姓名"
								style="margin-left: 10px; width: 180px" clearable></el-input>
						</div>
						<div class="panel-search-box">
							<span class="demonstration" style="margin-left: 10px">性别:</span>
							<el-select v-model="search.sex" placeholder="全部" style="width: 180px; margin-left: 10px"
								clearable>
								<el-option label="男" value="男"></el-option>
								<el-option label="女" value="女"></el-option>
							</el-select>
						</div>
						<div class="panel-search-box">
							<span class="demonstration" style="margin-left: 10px">在职状态:</span>
							<el-select v-model="search.status" placeholder="全部" style="width: 180px; margin-left: 10px"
								clearable>
								<el-option label="在职" value="0"></el-option>
								<el-option label="离职" value="1"></el-option>
							</el-select>
						</div>
						<div class="panel-search-box">
							<span class="demonstration" style="margin-left: 10px">岗位:</span>
							<el-input v-model="search.post" placeholder="请输入岗位" style="margin-left: 10px; width: 180px"
								clearable></el-input>
						</div>
						<div class="panel-search-box">
							<span class="demonstration" style="margin-left: 10px">部门:</span>
							<el-input v-model="search.dept" placeholder="请输入部门" style="margin-left: 10px; width: 180px"
								clearable></el-input>
						</div>
						<div class="panel-search-box">
							<el-button type="primary" style="margin-left: 10px" @click="upsearch">查询</el-button>
							<el-button type="" @click="cleanSearch">清空</el-button>
						</div>
					</div>
				</div>
				<scTable ref="table" border :apiObj="apiObj" :params="params" :height="700" stripe remoteSort remoteFilter
					@selection-change="selectionChange">
					<el-table-column type="selection" width="50"></el-table-column>

					<el-table-column label="员工编码" prop="empNum" align="center" width="180"></el-table-column>
					<el-table-column label="姓名" prop="name" align="center" width="120"></el-table-column>
					<el-table-column label="性别" prop="sex" align="center" width="120"></el-table-column>
					<el-table-column label="在职状态" prop="status" align="center" width="120">
						<template #default="scope">
							<el-tag v-if="scope.row.status == 1" type="danger">离职</el-tag>
							<el-tag v-if="scope.row.status == 0" type="success">在职</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="岗位" prop="post" align="center" width="200"></el-table-column>
					<el-table-column label="部门" prop="dept" align="center" width="220"></el-table-column>
				</scTable>
			</el-form>
			<div>
				<el-button style="margin-left: 30px" @click="close">取 消</el-button>
				<el-button v-if="mode != 'show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
			</div>
		</div>
	</el-main>
</template>

<script>
import labelName from './../../activeEnable/ActivityOverview/components/labelname.vue'
export default {
	emits: ['success', 'closed'],
	components: {
		labelName
	},
	data() {
		return {
			mode: 'add',
			titleMap: {
				add: '新增用户',
				edit: '编辑用户',
				show: '查看'
			},
			search: {},
			apiObj: this.$API.emp.listBystaff,
			params: {},
			visible: false,
			isSaveing: false,
			selection: [],
			//表单数据
			form: {
				orgId: '',
				realName: '',
				staffName: '',
				staffNumber: '',
				staffPass: '',
				headPortrait: '',
				staffEmail: '',
				staffSex: '',
				staffPhone: '',
				orgName: ''
				//group: []
			},
			//验证规则
			rules: {
				avatar: [{ required: true, message: '请上传头像' }],
				userName: [{ required: true, message: '请输入登录账号' }],
				name: [{ required: true, message: '请输入真实姓名' }],
				password: [
					{ required: true, message: '请输入登录密码' },
					{
						validator: (rule, value, callback) => {
							if (this.form.password2 !== '') {
								this.$refs.dialogForm.validateField('password2')
							}
							callback()
						}
					}
				],
				password2: [
					{ required: true, message: '请再次输入密码' },
					{
						validator: (rule, value, callback) => {
							if (value !== this.form.password) {
								callback(new Error('两次输入密码不一致!'))
							} else {
								callback()
							}
						}
					}
				],
				dept: [{ required: true, message: '请选择所属部门' }],
				group: [{ required: true, message: '请选择所属角色', trigger: 'change' }]
			},
			//所需数据选项
			groups: [],
			groupsProps: {
				value: 'id',
				emitPath: false,
				checkStrictly: true
			},
			depts: [],
			deptsProps: {
				value: 'id',
				checkStrictly: true
			}
		}
	},
	mounted() { },
	methods: {
		//显示
		open(mode = 'add') {
			this.mode = mode
			this.visible = true
			return this
		},
		close() {
			this.$emit('closed')
		},
		selectionChange(selection) {
			this.selection = selection
		},
		disposeData() {
			let formData = []
			this.selection.forEach((element) => {
				formData.push({
					orgId: this.form.orgId,
					realName: element.name,
					staffName: element.ldap,
					staffNumber: element.empNum,
					staffPass: '',
					headPortrait: '',
					staffEmail: element.email,
					staffSex: element.sex === '男' ? 1 : 0,
					staffPhone: element.phone,
					orgName: this.form.orgName
				})
			})
			return formData
		},
		async submit() {
			let reqData = this.disposeData()
			let res = await this.$API.staff.adds.post({ data: reqData })
			if (res.code === '0') {
				this.$message.success('操作成功')
			}
			this.$emit('closed')
		},
		upsearch() {
			// if(this.search.timeHorizon.length>0){
			//     this.search.startTime = this.search.timeHorizon[0]
			// 	this.search.endTime = this.search.timeHorizon[1]
			// }
			this.$refs.table.upData(this.search)
		},
		cleanSearch() {
			this.search = {}
			this.$refs.table.reload(this.search)
		},
		//表单注入数据
		setData(data) {
			//可以和上面一样单个注入，也可以像下面一样直接合并进去
			this.form.orgId = data.id
			this.form.orgName = data.label
			this.$refs.table.reload(this.search)
		}
	}
}
</script>

<style>
.info-box {
	border-bottom: 1px solid #e8e8e8;
}

.info-title {
	width: 845px;
	height: 32px;
	font-size: 22px;
	font-family: Source Han Sans SC-Bold, Source Han Sans SC;
	font-weight: bold;
	margin: 20px 0px 20px 15px;
	color: #333333;
}

.info-content {
	width: 100%;
	padding: 20px 20px 0px 20px;
}

.bottom-btn {
	width: 100%;
	height: 70px;
	position: absolute;
	bottom: 0;
	border-top: 0px solid #e8e8e8;
	padding-top: 10px;
}
</style>
